import { Button, InputNumber, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
const SelectArticleNum: React.FC<any> = (props: any) => {
  const [articlesNum, setArticlesNum] = useState<number>(30);
  const [articlesNumTip, setArticlesNumTip] = useState<string>(
    '小麦支持同时生成多篇文章，建议您多选择几篇进行生成',
  );
  const handleChange = (val: any) => {
    if (/^(?!0)[1-9][0-9]?$/.test(val)) {
      setArticlesNum(val);
      let seconds = 0;
      if (val < 10) {
        setArticlesNumTip(`小麦支持同时生成多篇文章，建议您多选择几篇进行生成`);
      } else if (val > 30) {
        setArticlesNumTip(`小麦预计耗时较长，您可以先处理其他事务，稍后查看`);
      } else {
        seconds = val * 5; // 1 对应 5 秒
        const minutes = Math.ceil(seconds / 60);
        setArticlesNumTip(`小麦将全力加速生成您的文章，预计耗时 ${minutes} 分钟`);
      }
    }
  };
  useEffect(() => {
    handleChange(30);
  }, []);

  //篇数确定
  const submitSelectNum = () => {
    props.generateSubmit(articlesNum);
    // setTimeout(() => {
    //   let systemTxtRecover = {
    //     key: nanoid(),
    //     type: 'userRecover',
    //     spend: 30,
    //     data: `生成篇数：${articlesNum}`,
    //   };
    //   props.setAILogs((prev: any) => [...prev, systemTxtRecover]);

    // }, 500);
  };

  return (
    <div className="selectArticleNumBox">
      <div className="selectArticleNumTitle">请告诉小麦您想要生成的文章篇数</div>
      <div className="selectArticleNumList">
        <div className="selectArticleNumList-hd">
          <Tooltip
            defaultOpen={false}
            trigger={['hover']}
            color="blue"
            title="请输入1-99的整数"
            placement="topLeft"
          >
            <InputNumber
              min={1}
              precision={0}
              max={99}
              defaultValue={articlesNum}
              onChange={handleChange}
              style={{ width: 60 }}
            />
          </Tooltip>
        </div>
        <div className="selectArticleNumList-bd">{articlesNumTip}</div>
      </div>
      <div className="selectArticleNumBtnBox">
        <Button
          type="primary"
          onClick={() => {
            submitSelectNum();
          }}
        >
          确定
        </Button>
      </div>
    </div>
  );
};

export default SelectArticleNum;
